import React, { Component } from 'react'
import { Input, Select, Icon } from 'antd';
import { searchInput } from '../../actions/searchInput.redux'
import { connect } from 'react-redux'
import tplFrom from '../tpl/tplfrom'
import './tpl.styl'
const Option = Select.Option;

function handleSelect(value){
  // console.log(`selected${value}`)
}

@connect(
  state => state.sInput,
  {searchInput}
)
@tplFrom
class SearchInput extends Component{
  constructor(props){
    super(props)
    this.state = {}
    this.handleSelect = this.handleSelect.bind(this)
    this.searchList = this.searchList.bind(this)
  }

  handleSelect(value){
    this.props.handleChage('address',value)
  }
  searchList(){
    this.props.searchInput(this.props.state)
  }
  render(){
    const selectBefore = (
      <Select defaultValue={this.props.address} style={{ width: 70 }} onChange={this.handleSelect}>
        <Option value="全网">全网</Option>
        <Option value="本站">本站</Option>
      </Select>
    );
    return (
      <div className="m-search">
        <div className='text'>
          <Input  addonBefore={selectBefore} placeholder='请输入搜索内容...' onChange={
            v=>{this.props.handleChage('value',v.target.value)}
          } />

        </div>
        <div className="icon">
          <Icon type={'search'} onClick={this.searchList}/>
        </div> 
      </div>
    )
  }
}
export default SearchInput

